<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .all{
           width:300px; height:300px; border: solid 2px #000; 
           overflow: hidden;
        }
        .all ul{
            width:1500px;
        }
        .all li{
            width:300px; height:300px; 
            float:left;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;
            animation: go 6s steps(5) infinite;
        }
        .all li:nth-of-type(1){
            background: red;
        }
        .all li:nth-of-type(2){
            background: blue;
        }
        .all li:nth-of-type(3){
            background: green;
        }
        .all li:nth-of-type(4){
            background: yellow;
        }
        .all li:nth-of-type(5){
            background: pink;
        }
        @keyframes go{
            0%{
                /* 初始的状态 */
                position: relative;
                left: 0;
            }
            100%{
                position: relative;
                left:-1500px;
            }
        }
    </style>
    <!-- 
        分析
            1，显示区域
            2，位移 - margin position transform
            3, steps 
            4, 动画
     -->
</head>
<body>
   <div class="all">
       <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
       </ul>
   </div> 
</body>
</html>
